<template >
  <div class="imageMaterial">
    <div class="imageMaterialWrapper">
      <div class="formContent">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="素材类型" prop="mediaType" placeholder="请选择素材类型">
            <el-select v-model="ruleForm.mediaType" placeholder="请选择活动区域">
              <el-option label="图片" value="image"></el-option>
              <el-option label="语音" value="voice"></el-option>
              <el-option label="视频" value="video"></el-option>
              <el-option label="图文" value="news"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图片标题" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="图片描述" prop="introduction">
            <el-input v-model="ruleForm.introduction"></el-input>
          </el-form-item>
          <el-form-item label="图片上传">
            <label for="fileField">
              <input id="btn" type="button" value="上传文件"><span id="text">{{ helptext }}</span>
              <input id="fileFieldContent" type="file" name="fileUpload" @change="myFunction()">
            </label>
            <!-- <input id="fileField" type="file" name="fileUpload"> -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      ruleForm: {
        mediaType: 'image',
        title: '',
        introduction: '',
        imageUrl: ''
      },
      helptext: '请选择文件',
      rules: {
        mediaType: [
          { required: true, message: '请输入素材类型', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入图片标题', trigger: 'blur' }
        ],
        introduction: [
          { required: true, message: '请输入图文描述', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (document.getElementById('fileFieldContent').value !== '' && document.getElementById('fileFieldContent').value !== null) {
            const param = new FormData()
            param.append('mediaType', this.ruleForm.mediaType)
            param.append('title', this.ruleForm.title)
            param.append('introduction', this.ruleForm.introduction)
            param.append('fileUpload', document.getElementById('fileFieldContent').files[0], document.getElementById('fileFieldContent').files[0].name)
            this.$http.post('/Material/addMaterial', param).then(response => {
              if (response.data.errcode === null) {
                this.$message({
                  message: '上传图片素材成功!',
                  type: 'success'
                })
              }
            }).catch(error => {
              this.$message({
                message: '上传图片素材异常' + error,
                type: 'error'
              })
            })
          } else {
            this.$message({
              message: '文件不能为空',
              type: 'warning'
            })
          }
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.ruleForm.mediaType = ''
      this.helptext = ''
      if (document.getElementById('fileFieldContent').value !== '' && document.getElementById('fileFieldContent').value !== null) {
        document.getElementById('fileFieldContent').files[0].name = ''
      }
    },
    myFunction() {
      if (document.getElementById('fileFieldContent').value !== '' && document.getElementById('fileFieldContent').value !== null) {
        this.helptext = document.getElementById('fileFieldContent').files[0].name
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import 'src/styles/variables.scss';
.imageMaterial {
  padding: 20px;
  .imageMaterialWrapper {
    background-color: white;
    .formContent {
      padding: 20px;
    }
  }
}
label{
  position: relative;
}
#fileFieldContent{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
#btn{
    margin-right: 5px;
}
#text{
    color: red;
}

#btn{
    padding: 8px 10px;
    background: #409EFF;
    color: #FFF;
    border: none;
    border-radius: 5px;
}
</style>

